<template>
	<view class="vw100 minh100vh pb300 bgf6">
		
		<!-- 轮播图 -->
		<view class="poRe">
			<swiper
				:autoplay="false" loading class="h100vw poRe" keyName="url"
				:list="dataInfo.banner"
				@change="handleBanner"
			>
				<swiper-item v-for="(item, index) in dataInfo.banner" :key="index">
					<view class="vw100 h100vw relative bg-w">
						<video :controls="false" v-if="item.type=='video'" :src="item.url" class="vw100 h100vw"></video>
						<image v-if="item.type=='image'" :src="item.url" mode="aspectFit" lazy-load class="vw100 h100vw"></image>
					</view>
				</swiper-item>
			</swiper>
			<view slot="indicator" class="bottom-30 right-30 row a-center j-end absolute z-index100">
				<view class="row bg-w-per50 br20 h44 ft26">
					<view class="px14 py4"
						:class="currentNum<dataInfo.video_num?'c-333333 bg-w br20':'c-666666'"
						v-if="dataInfo.video_num>0"
					>
						<text class="lh30">视频</text>
					</view>
					<view class="px14 py4"
						:class="currentNum>=dataInfo.video_num?'c-333333 bg-w br20':'c-666666'"
						v-if="dataInfo.image_num>0"
					>
						<text class="lh30">图片{{ currentNum - dataInfo.video_num + 1 }}/{{ dataInfo.image_num }}</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 信息 -->
		<view class="p20 bgfff mar-top-20">
			<view class="ft32 lh50">
				{{dataInfo.name}}
			</view>
			<view class="row j-sb a-center mt20">
				<view class="row a-center">
					<view class="row a-center" v-if="!is_vip">
						<view class="c-E23737 bolder ft32">
							￥{{dataInfo.price}}
						</view>
					</view>
					<view class="row a-center" v-else>
						<view class="c-F6911B bolder ft32">
							￥{{dataInfo.vip_price}}
						</view>
						<view class="ml10 c-E23737 ft24 text-nowrap text-linethrough">
							原价￥{{dataInfo.price}}
						</view>
					</view>
				</view>
				<view class="ft28">
					{{dataInfo.total_sales}}+人已购
				</view>
			</view>
		</view>
		
		<!-- 介绍 -->
		<view class="p20 mar-top-20 bgfff">
			<view class="w-per100 ft30 text-center">
				商品介绍
			</view>
			<view class="w-per100 mt20">
				<rich-text :nodes="dataInfo.introduce"></rich-text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="bgfff mar-top-20 p20">
			<view class="w-per100 ft30">
				评价
			</view>
			<view class="w-per100">
				<view class="row py30" :class="index>0?'bort-F1F1F1':''" v-for="(item,index) in comments.length>3?(ismore?comments:comments.slice(0,2)):comments" :key="index">
					<view class="wh70 mr20 br-per100">
						<image class="wh70 br-per100" :src="item.avatar" mode=""></image>
					</view>
					<view class="flex1">
						<view class="w-per100 row j-sb a-center">
							<view class="">
								<view class="ft26">
									{{item.nickname}}
								</view>
								<view class="mar-top-12">
									<!-- <u-rate readonly :value="item.score" active-color="#F6911B" inactive-color="#F1F1F1" inactiveIcon="star-fill" allowHalf gutter="6"></u-rate> -->
									<uni-rate :size="16" readonly activeColor="#F6911B" allowHalf  v-model="item.score" />
								</view>
							</view>
							<view class="ft24">
								{{item.create_time}}发布
							</view>
						</view>
						<view class="mt20 c-666666 lh40">
							{{item.content}}
						</view>
						<view class="row wrap">
							<view class="wh200 mt20" :class="ind%3===0?'':'ml10'" v-for="(it,ind) in item.images" :key="ind" @tap="privewImage(index,ind)">
								<image class="wh200 br16" :src="it" mode="aspectFill"></image>
							</view>
						</view>
						<view class="mt20 br8 p20 bg-F6F6F6" v-if="item.reply_content">
							<view class="c-666666 ft26">
								{{reply_name?reply_name:'平台'}}回复：{{item.reply_content}}
							</view>
							<view class="row j-end ft24 mt20">
								{{item.reply_time}}
							</view>
						</view>
					</view>
				</view>
				<view class="mt30" v-if="comments.length>3">
					<view class="w-per100 ft26 c-666666 row flex-center" v-if="ismore" @tap="changeMore">
						<text class="mr10">收起</text>
						<u-icon name="arrow-up" color="#666" size="14"></u-icon>
					</view>
					<view class="w-per100 ft26 c-666666 row flex-center" v-else @tap="changeMore">
						<text class="mr10">查看全部</text>
						<u-icon name="arrow-down" color="#666" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品推荐 -->
		<view class="bgfff mar-top-20 p20">
			<view class="w-per100 ft30">
				商品推荐
			</view>
			<view class="w-per100 row j-sb wrap">
				<view class="w-per48 mt30" v-for="(item,index) in recommends" :key="index" @tap="changeDetail(item)">
					<view class="square-img br16 relative">
						<image class="son_img br16" :src="item.image_text" mode=""></image>
					</view>
					<view class="w-per100 mt10">
						<view class="ft28 lh46 text2">
							{{item.name}}
						</view>
						<view class="w-per100 mt10 row j-sb a-center">
							<view class="row a-center">
								<view class="row a-center" v-if="!is_vip">
									<view class="c-E23737 ft28">
										￥{{item.price}}
									</view>
								</view>
								<view class="row a-center" v-else>
									<view class="c-F6911B ft28">
										￥{{item.vip_price}}
									</view>
									<view class="ml10 c-E23737 ft24 text-nowrap text-linethrough">
										原价￥{{item.price}}
									</view>
								</view>
							</view>
							<!-- <view class="ft24 c-999999">
								年销{{item.total_sales}}+
							</view> -->
						</view>
						<view class="w-per100 mt10 row j-end">
							<view class="ft24">
								年销{{item.total_sales}}+
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="w-per100 pb20 fixed bottom0 left0 z-index100 bgfff">
			<view class="p20 row">
				<view class="w-per30 row a-center j-sb">
					<view class="column a-center relative" @tap="toCart">
						<image class="wh48" src="https://admin.hnyxtywh.com/images/img/icon_normal_gouwuche.png" mode=""></image>
						<text class="ft24 mt4">购物车</text>
						<view class="absolute right0 top0 z-index1000 py2 px6 br10 c-w ft16 bg-E23737" v-if="cart_num>0">
							{{cart_num}}
						</view>
					</view>
					<button class="column a-center" @click="ke_btn">
						<image class="wh48" src="https://admin.hnyxtywh.com/images/img/icon_kefu.png" mode=""></image>
						<text class="ft24 mt4">客服</text>
					</button>
					<view class="column a-center" @tap="handleCollect">
						<image class="wh48" :src="is_collect==1?'https://admin.hnyxtywh.com/images/img/icon_select_shoucang.png':'https://admin.hnyxtywh.com/images/img/icon_normal_shoucang.png'" mode=""></image>
						<text class="ft24 mt4">收藏</text>
					</view>
				</view>
				<view class="flex1 ml30 row a-center j-sb">
					<view class="w-per48 py16 c-w ft32 add_car br16 row flex-center" @tap="open(1)">
						加入购物车
					</view>
					<view class="w-per45 py16 c-w ft32 buy_car br16 row flex-center" @tap="open(2)">
						立即购买
					</view>
				</view>
			</view>
		</view>
		
		<!-- 规格 -->
		<tm-drawer placement="bottom" :show="show" :height="800" :round="16" @close="close" overlayClick hideHeader>
			<view class="px30 pt30 pb80">
				<view class="w-per100">
					<view class="row a-center">
						<image class="wh160 br16" :src="dataInfo.image_text" mode=""></image>
						<text class="ft32 bolder c-E23737 ml20">￥{{spec_price}}</text>
					</view>
					<view class="w-per100" v-if="dataInfo.is_sku===1">
						<view class="w-per100" v-for="(itemm,indexx) in infoAttr" :key="indexx">
							<view class="mt40 ft30">
								{{itemm.name}}
							</view>
							<view class="w-per100 row wrap mt10">
								<view class="py16 px32 br8 column a-center mt20"
									:style="i===0?'':'margin-left:30rpx;'"
									:class="dataAttr.includes(it)?'c-208BFF bor-208BFF bg-w':'c-333333 bg-F6F6F6 bor-F6F6F6'"
									v-for="(it,i) in itemm.item" :key="i"
									@tap="changeAttr(indexx,it)"
								>
									<view class="ft26">
										{{it.name}}
									</view>
									<!-- <view class="ft28 mt10">
										￥{{items.attr_price}}
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="row a-center j-sb mt60">
						<view class="ft30">
							数量
						</view>
						<view class="">
							<tm-stepper :min="1" :max="max_stock" v-model="num" :defaultValue="num"></tm-stepper>
						</view>
					</view>
				</view>
				
				<view class="w-per100 mt110">
					<view class="w-per80 mxauto py16 c-w ft32 add_car br16 row flex-center" v-if="is_open===1" @tap="addCart">
						加入购物车
					</view>
					<view class="w-per80 mxauto py16 c-w ft32 buy_car br16 row flex-center" v-if="is_open===2" @tap="toBuyNow">
						立即购买
					</view>
				</view>
			</view>
		</tm-drawer>
		
	</view>
</template>

<script setup>
import { onLoad, onShareAppMessage, onShow,onShareTimeline } from '@dcloudio/uni-app';
import {goodsInfo,goodsEvaluate,cartNum,saveCart,collectGoods} from '@/utils/api'
import {getRichtext,checkLogin} from '@/utils/utils'
import { ref } from 'vue';
const	is_vip = ref(false),
		is_open = ref(0),//1加入购物车2立即购买
		show = ref(false),
		ismore = ref(false),//更多
		cart_num = ref(0),//购物车数量
		id = ref(false),
		num = ref(1),//数量
		max_stock = ref(0),//库存
		modelssku_id = ref(''),//属性对应id
		spec_price = ref(0),//属性对应的钱
		attrs = ref([]),//对照id的列表
		infoAttr = ref([]),//商品属性
		dataAttr = ref([]),//选择的属性
		is_collect = ref([]),//是否收藏1是0否
		dataInfo = ref({
			video_num:0,//商品数量
			image_num:0,//图片数量
			banner:[],
		}),
		currentNum = ref(0),
		recommends = ref([]),//商品推荐
		comments = ref([])//评价

onLoad((p)=>{
	id.value = p.id?p.id:'';
	if(p.pid){
		uni.setStorageSync('pid',p.pid)
	}
	is_vip.value = uni.getStorageSync('vip_status')===1?true:false;
})	
onShow(()=>{
	getGoodsDetail()
	if(uni.getStorageSync('token')){
		getCartList();
	}
})
onShareAppMessage(()=>{
	return{
		path:'/indexpages/goodsDetail/goodsDetail?id='+id.value+'&pid='+uni.getStorageSync('id')
	}
})
onShareTimeline(()=>{
	return{
		path:'/indexpages/goodsDetail/goodsDetail?id='+id.value+'&pid='+uni.getStorageSync('id')
	}
})
// 加入购物车
const addCart = async() =>{
	if(dataInfo.value.is_sku===1&&modelssku_id.value===''){
		uni.showToast({
			title:'规格选择不完整',
			icon:'none'
		})
		return ;
	}
	let obj = dataInfo.value.is_sku==1?
	{
		id:id.value,
		num:num.value,
		scene:is_open.value,
		sku_code:modelssku_id.value,
	}:{
		id:id.value,
		num:num.value,
		scene:is_open.value,
	}
	let res = await saveCart(obj);
	if(res.code == 1){
		close();
		uni.showToast({
			title:'添加成功',
			icon:'none'
		})
		getCartList();
	}else{
		uni.showToast({
			title:res.msg,
			icon:'none'
		})
	}
}
// 立即购买
const toBuyNow =async()=>{
	console.log(num.value)
	if(dataInfo.value.is_sku===1&&modelssku_id.value===''){
		uni.showToast({
			title:'规格选择不完整',
			icon:'none'
		})
		return ;
	}
	let obj = dataInfo.value.is_sku==1?
	{
		id:id.value,
		num:num.value,
		scene:is_open.value,
		sku_code:modelssku_id.value,
	}:{
		id:id.value,
		num:num.value,
		scene:is_open.value,
	}
	let res = await saveCart(obj);
	if(res.code == 1){
		close();
		let cart_id = res.data.cart_id;
		
		let isSwitch = dataInfo.value.is_pick===0?1:2;
		
		uni.navigateTo({
			url:'/indexpages/goodsBuy/goodsBuy?ids='+cart_id+'&isSwitch='+isSwitch,
		})
		// uni.navigateTo({
		// 	url:'/indexpages/setorder/setorder?ids='+cart_id+'&isSwitch='+isSwitch,
		// })
	}else{
		uni.showToast({
			title:res.msg,
			icon:'none'
		})
	}
}
const ke_btn = () =>{
	uni.showModal({
		title: '添加客服微信',
		content: dataInfo.value.shop.wx_number,
		confirmText:'复制',
		success: function (res) {
			if (res.confirm) {
				uni.setClipboardData({
					data:dataInfo.value.shop.wx_number,
					success() {
						uni.showToast({
							title:'复制成功',
							icon:'success'
						})
					}
				})
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
// 确定属性
const handleAttr =()=>{
	console.log('attr',dataAttr.value);
	if (attrs.value && Array.isArray(attrs.value)) {
		attrs.value.forEach((x,index)=>{
			let xx = x.item_ids.split(',');
			
			if(xx.length === dataAttr.value.length && xx.every((v,i) => Number(v) == dataAttr.value[i].id)){
				modelssku_id.value = x.code;
				spec_price.value = is_vip.value?x.vip_price:x.price;
				max_stock.value = x.stock;
				console.log('se',x);
			}
		})
	}
}
// 选择属性
const changeAttr=(i,it)=>{
	// console.log('attr',it);
	if(dataAttr.value[i]!==it){
		dataAttr.value[i] = it;
	}
	handleAttr();
}
const open=(t)=>{
	if(checkLogin()){
		show.value = true;
		is_open.value = t;
		if(dataInfo.value.is_sku===0){
			spec_price.value = is_vip.value?dataInfo.value.vip_price:dataInfo.value.price;
		}
	}
}
const close =()=>{
	show.value = false;
}
// 推荐商品详情
const changeDetail=(item)=>{
	id.value = item.id;
	uni.pageScrollTo({
	    scrollTop: 0, // 滚动到页面的顶部位置
	    duration: 300 // 滚动动画的时长，单位ms
	  });
	getGoodsDetail();
}
// 更多
const changeMore=()=>{
	ismore.value = !ismore.value;
}
// banner
const handleBanner=(e)=>{
	console.log(e.detail);
	currentNum.value = e.detail.current;
}
// 收藏
const handleCollect=async()=>{
	if(checkLogin()){
		let obj = {
			id:id.value,
		}
		let res = await collectGoods(obj);
		if(res.code == 1){
			console.log('收藏成功');
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			getGoodsDetail();
		}else{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	}
}
// 预览图片
const privewImage =(index,ind)=>{
	uni.previewImage({
		current:ind,
		urls: comments.value[index].images,
	});
}
// 去联系客服
const toContact =()=>{
	console.log('客服');
	uni.navigateTo({
		url:'/mine/contactUs/contactUs'
	})
}
// 去购物车
const toCart =()=>{
	if(checkLogin()){
		uni.reLaunch({
			url:'/pages/car/car'
		})
	}
}
// 详情
const getGoodsDetail=async()=>{
	let obj = {
		id:id.value,
	}
	let res = await goodsInfo(obj);
	if(res.code == 1){
		dataInfo.value = res.data.goods;
		dataInfo.value.video_num = 0
		dataInfo.value.image_num = 0
		dataInfo.value.banner = []
		console.log(dataInfo.value);
		max_stock.value = dataInfo.value.stock;
		
		// 商品推荐
		recommends.value = res.data.recommend_goods;
		
		// 属性
		infoAttr.value = res.data.goods_sku.attr;
		attrs.value = res.data.goods_sku.sku;
		dataAttr.value = [];
		infoAttr.value.forEach(item=>dataAttr.value.push({}));
		
		// 收藏
		is_collect.value = res.data.is_collect;
		
		// 商品介绍
		dataInfo.value.introduce = getRichtext(dataInfo.value.introduce);
	
		// banner
		dataInfo.value.banner = [];
		let arr = [];
		if(dataInfo.value.video_text){
			arr.push({
					url:dataInfo.value.video_text,
					type:'video',
				})
			dataInfo.value.video_num = 1;
		}
		let images = dataInfo.value.images;
		if (images && Array.isArray(images)) {
			images.forEach(item=>{
				arr.push({
						url:item,
						type:'image',
					})
				console.log('111',dataInfo.value.image_num);
				dataInfo.value.image_num = dataInfo.value.image_num + 1;
			})
		}
		dataInfo.value.banner = arr;
		console.log('123',dataInfo.value.image_num);
		getGoodsEvaluate();
	}else{
		uni.showToast({
			title:res.msg,
			icon:'none',
		})
	}
}
// 评价
const getGoodsEvaluate =async()=>{
	let obj = {
		id:id.value,
		page:1,
		limit:100000,
	}
	let res = await goodsEvaluate(obj);
	console.log(res,9988777)
	if(res.code == 1){
		comments.value = res.data.evaluate.data;
	}else{
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	}
}
// 购物车 
const getCartList =async()=>{
	let obj = {
		page:1,
	}
	let res = await cartNum(obj);
	if (res.code == 1) {
		cart_num.value = res.data.cart_data?.length || 0;
	}else{
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	}
}
</script>

<style scoped lang="scss">
	::v-deep .u-number-box__minus{
		height: 24px !important;
		border: 2rpx solid #ccc;
		border-top-left-radius: 11px !important;
		border-bottom-left-radius: 11px !important;
	}
	::v-deep .u-number-box__input{
		font-size: 26rpx !important;
		margin: 0 !important;
		border-top: 2rpx solid #ccc;
		border-bottom: 2rpx solid #ccc;
	}
	::v-deep .u-number-box__plus{
		height: 24px !important;
		border: 2rpx solid #ccc;
		border-top-right-radius: 11px !important;
		border-bottom-right-radius: 11px !important;
	}
	.add_car{
		background: #C9951C;
	}
	.buy_car{
		background: linear-gradient( 119deg, #FD342E 0%, #FF755F 100%);
	}
</style>
